<template>
  <div class="tdetail">
		<article class="article">
			<figure class="pic">
				<img :src="detail.articleImg | hasdomain" :class="{none: !detail.articleImg}">
			</figure>
			<div class="content" v-html="parseHtml(detail.articleContent)"></div>
		</article>
		<p class="s-title vux-1px-b">
			<span>专题相关大师</span>
		</p>
		<mlist :masters="masters"></mlist>
		<p class="s-title vux-1px-b">
			<span>热门评论</span>
		</p>
		<ul class="feedbacks" v-if="feedbacks.length">
			<li class="vux-1px-b" v-for="(v, i) in feedbacks" :key="'fb' + i">
				<div class="infor">
					<figure class="avatar">
						<img :src="v.userPhoto | hasdomain">
					</figure>
					<div class="mation">
						<p>{{v.userName || "匿名用户"}}</p>
						<time>{{v.createTime}}</time>
					</div>
				</div>
				<p class="dec">{{v.userContent}}</p>
			</li>
		</ul>
		<s404 v-else title="没有相关评论哦，快去追加评价吧"></s404>

		<form class="want">
			<input type="text" class="input" v-model="detail.content" placeholder="我也想说">
			<button type="button" class="send" :disabled="!detail.content" @click="addFeedback">发送</button>
		</form>
  </div>
</template>

<script>
import mlist from '@/views/master/mlist';
import s404 from "@/views/status/404";

export default {
	components: {
		mlist,
		s404,
	},
	data() {
		return {
			detail: {},
			masters: [],
			feedbacks: [],
		}
	},
	computed: {
		aid() {
			return this.$route.params.id;
		}
	},
	methods: {
		parseHtml(html) {
			if(!html) return ''; 
      var div = document.createElement('div');
      div.innerHTML = html;
      return div.innerText || div.textContent;
    },
		getArticle() {
			this.$http.fetchGet('getArticle', {
        id: this.aid,
      }).then(({ data = {} }) => {
				console.log('专题详情', data);
				this.detail = data;
				this.getMasters();
				this.getFeedback();
      })
		},
		getMasters() {
      this.$http.fetchGet('getmasterlist', {
        tag_ids: this.detail.tag,
        infotype: 1,
        offset: 0,
        limit: 3,
      }).then(({ data = [] }) => {
        console.log('大师列表', data);
        this.masters = data;
      })
		},
		getFeedback() {
      this.$http.fetchGet('getFeedback', {
        id: this.detail.articleId,
        offset: 0,
				limit: 3,
				feedbackType: 5,
      }).then(({ data = [] }) => {
        console.log('专题评论', data);
        this.feedbacks = data;
      })
		},
		addFeedback() {
			this.$http.fetchGet('getAddfeedback', {
        userId: this.$store.state.userId,
				userContent: this.detail.content,
				consultanceId: this.detail.articleId,
				feedbackType: 5,
      }).then(({ data }) => {
        console.log('添加专题评论', data);
        if(data && data == 'ok'){
					this.$vux.toast.text('发表成功');
					setTimeout(() => {
						this.getFeedback();
					}, 2000);
				}
      })
		}
	},
	created() {
		this.getArticle();
	}
}
</script>

<style lang="less">
.tdetail .content img{
  display: block;
  width: 100%;
	.bri(10);
}
</style>

<style scoped lang="less">
.tdetail{
	background-color: @bgColor;
	.article{
		.p(20);
		.pic{
			img{
				display: block;
				width: 100%;
				.bri(10);
				&.none{
					margin: 0 auto;
					width: 30%;
				}
			}
		}
		.content{
			.px2rem(min-height, 100);
			.p(20);
			.mt(20);
			.bri(10);
			.f26;
			line-height: 2;
			background-color: #fff;
		}
	}
	.s-title{
		.f30;
		.h(100);
		.lh(100);
		text-align: center;
		background-color: #fff;
		span{
			padding: 0 .5em;
			position: relative;
			&:before, &:after{
				content: '';
				position: absolute;
				top: 0;
				.w(100);
				height: 100%;
				background: no-repeat center;
				background-size: auto 40%;
			}
			&:before{
				.px2rem(left, -100);
				background-image: url('../../assets/index/tl@2x.png');
				background-position-x: right;
			}
			&:after{
				.px2rem(right, -100);
				background-image: url('../../assets/index/tr@2x.png');
				background-position-x: left;
			}
		}
	}
	.feedbacks{
		.pl(20);
		.pr(20);
		background-color: #fff;
		li{
			.pt(30);
			.pb(24);
			.infor{
				display: flex;
				align-items: flex-start;
				.avatar{
					img{
						display: block;
						.h(60);
						.w(60);
					}
				}
				.mation{
					.pl(16);
					flex: 1;
					line-height: 1;
					p{
						.f30;
						.mb(18);
					}
					time{
						.f20;
						color: #999;
					}
				}
			}
			.dec{
				.pt(20);
				.f26;
				.lh(40);
				.px2rem(max-height, 119);
				overflow: hidden;
			}
		}
	}
	.s404{
		.pt(100);
		.pb(100);
	}
	.want{
		.h(100);
		.p(20);
		box-sizing: border-box;
		display: flex;
		background-color: #fff;
		.input{
			flex: 1;
			outline: none;
			padding: 0;
			border: 1px solid @bdColor;
			background-color: transparent;
			.h(60);
			.bri(10);
			.pl(14);
			.pr(14);
			.f24;
		}
		.send{
			.f26;
			.ml(20);
			.pl(20);
			.pr(20);
			.bri(10);
			border: 0;
			color: #fff;
			background-color: @primary;
			&:disabled{
				background-color: fadeout(@primary, 50%);
			}
		}
	}
}
</style>